<template>
	<view style="display: flex;flex-direction: column;">

		<view class="formContainer">
			<uni-forms ref="form">
				<uni-forms-item label="选择车辆" required>
					<view @click="selcar">
						<u--input v-model="fromData.carLicenceNum" placeholder="请选择车辆" disabled disabledColor="#fff"
							suffixIcon="arrow-right"></u--input>
					</view>

				</uni-forms-item>

				<uni-forms-item label="选择时间" required>
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至"
						@change="timeChange" />
				</uni-forms-item>

				<uni-forms-item label="选择平台" required>
					<uni-data-checkbox mode="tag" multiple v-model="sourceCode" @change="selfinish"
						:localdata="labelList"></uni-data-checkbox>
				</uni-forms-item>

			</uni-forms>
		</view>

		<view class="button-container">
			<button class="btn-item" @click="commit">提交</button>
		</view>

	</view>
</template>

<script>
	import {
		getDicts,
		otaworkorder
	} from '@/api/car-api.js';
	export default {
		data() {
			return {
				datetimerange:[],
				fromData: {
					carUsageStartTime: '',
					carUsageEndTime: '',
					sourceCode: null,
					workOrderType: 1,
					carModelId: '',
					carLicenceNum: ''
				},
				labelList: [],
				sourceCode: ''
			}
		},
		// computed: {
		// 	datetimerange() {
		// 		return [this.fromData.carUsageStartTime, this.fromData.carUsageEndTime];
		// 	},
		// },
		methods: {
			getOriginList() {
				getDicts('ota_order_resource').then(res => {

					this.labelList = res.data.map(item => {
						return {
							value: item.dictValue,
							text: item.dictLabel
						}
					})

				})
			},
			selcar() {
				console.log('点击了')
				uni.navigateTo({
					url: '/workbench/illegal/carList'
				})
			},
			selfinish(e) {
				console.log('选择了平台', e.detail.value.join(','))
				this.fromData.sourceCode = e.detail.value.join(',')
			},
			timeChange(e) {
				console.log('选择了时间', e)
				this.fromData.carUsageStartTime = e[0];
				this.fromData.carUsageEndTime = e[1];
			},
	
			commit() {

				if (uni.$u.test.isEmpty(this.fromData.carModelId)) {
					uni.showToast({
						title: '请选择车辆',
						icon: 'error'
					})
					return
				}
				if (uni.$u.test.isEmpty(this.fromData.carUsageStartTime) || uni.$u.test.isEmpty(this.fromData
						.carUsageEndTime)) {
					uni.showToast({
						title: '请选择时间',
						icon: 'error'
					})
					return
				}
				if (uni.$u.test.isEmpty(this.fromData.sourceCode)) {
					uni.showToast({
						title: '请选择平台',
						icon: 'error'
					})
					return
				}

				uni.showLoading()
				otaworkorder(this.fromData).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					uni.$emit('refreshota')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)

				}).catch(e => {
					uni.hideLoading()
				})

			}
		},
		onLoad(op) {
			let that = this
			uni.setNavigationBarTitle({
				title: op.type == 1 ? '库存占用' : '库存释放'
			})
            
			this.fromData.workOrderType = op.type;

			this.getOriginList();

			uni.$on('illegalCarList', (car) => {
				that.fromData.carModelId = car.carId;
				that.fromData.carLicenceNum = car.carNo;
				that.$forceUpdate();
			})
		}
	}
</script>

<style lang="scss" scoped>
	.item-car {
		background-color: #FAFAFA;
		border-radius: 8rpx;
		margin: 23rpx 23rpx 0;
		display: flex;
		flex-direction: column;
		padding: 32rpx 23rpx;

		.carno {
			color: #333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.store {
			margin-top: 23rpx;
			color: #666;
			font-size: 28rpx;
			display: flex;

			text {
				flex: 1;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.order-item-wrap {
		height: 85rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;

		.name {
			font-size: 28rpx;
			color: #666;
		}

		.value {
			font-size: 28rpx;
			color: #333;
			word-break: break-all;
			flex: 1;
			text-align: end;
			margin-left: 10rpx;
		}
	}

	.content-card {
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 16rpx;
		background-color: white;

	}

	.title-dot {
		margin-left: 47rpx;
		color: #333;
		padding: 32rpx 0;
		font-weight: bold;
		font-size: 28rpx;
		position: relative;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			position: absolute;
			left: -16rpx;
			width: 8rpx;
			height: 24rpx;
			border-radius: 4rpx;
			background-color: #2879FF;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: -47rpx;
			right: 0;
			height: 2rpx;
			background-color: #f5f5f5;
		}
	}

	.bottom-space {
		padding-bottom: 32rpx;
	}

	.formContainer {
		margin: 40rpx 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}

	.button-container {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		// height: 100rpx;
		bottom: 0;
		z-index: 2;
		background-color: white;
		align-items: center;
		padding: 10rpx 10rpx 0;
		flex-wrap: wrap;

	}

	.btn-item {
		min-width: 160rpx;
		flex: 1;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 0 10rpx 10rpx;
		background-color: $xz-bgColor-blue;
		color: white;
		white-space: nowrap;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 26rpx;
	}
</style>